﻿@model BuildJavasciptDataModel_Test.DataModels.BasicModel
@using BuildJavascriptDataModel
<h2>
   Basic Data Model</h2>
   <div>This demo also shows off <a href="https://github.com/phototom/ko-autobind" target="_blank" >ko-autobind</a> library by the same
   author as this project.  This JavaScript library will automatically add the data-bind statements required by knockoutjs to bind
   the data-model to the html.</div>
   <div>
   To see how BuildJavascriptDataModel works, please review the razor view code and the generated html in your browser
   </div>
<div id='bindThis'>
    @using (Html.BeginForm())                   
    {
        @Html.ValidationSummary(true)
        <fieldset class="demoTable">
            <legend>ko-autobinding Demo</legend>          '
            <table >
                <thead>
                    <td width="30%">
                        &nbsp;
                    </td>
                    <td width="40%">
                            "Autobind" Objects
                    </td>
                    <td width="30%">
                            "Manually Bound" Objects
                    </td>
                </thead>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        Items in this column have their knockoutjs data-bind attributes added automatically
                        at runtime by the ko.autobind.js plugin. Note that the markup in this Razor View
                        for items in this column is significantly cleaner.
                    </td>
                    <td>
                        Items in this column have their knockoutjs data-bind attribute added to the the
                        html elements in this Razor View
                    </td>
                </tr>
                <tr>
                    <td class="editor-label">
                        @Html.LabelFor(model => model.CheckBoxTest)
                    </td>
                    <td class="editor-field">
                        @Html.EditorFor(model => model.CheckBoxTest)
                        @Html.ValidationMessageFor(model => model.CheckBoxTest)
                    </td>
                    <td class="editor-field">
                        <span data-bind="text: model().CheckBoxTest "></span>
                    </td>
                </tr>
                <tr>
                    <td class="editor-label">
                        @Html.LabelFor(model => model.IntegerTest)
                    </td>
                    <td class="editor-field">
                        @Html.EditorFor(model => model.IntegerTest)
                        @Html.ValidationMessageFor(model => model.IntegerTest)
                    </td>
                    <td class="editor-field">
                        <span data-bind="text: model().IntegerTest "></span>
                    </td>
                </tr>
                <tr>
                    <td class="editor-label">
                        @Html.LabelFor(model => model.RadioButtons)
                    </td>
                    <td class="editor-field">
                        <div>
                            &nbsp;1: @Html.RadioButtonFor(x => x.RadioButtons, "1")</div>
                        <div>
                            &nbsp;2: @Html.RadioButtonFor(x => x.RadioButtons, "2")</div>
                        <div>
                            37: @Html.RadioButtonFor(x => x.RadioButtons, "37")</div>
                        <div>
                            42: @Html.RadioButtonFor(x => x.RadioButtons, "42")</div>
                        @Html.ValidationMessageFor(model => model.RadioButtons)
                    </td>
                    <td class="editor-field">
                        <div>
                            101:
                            <input name="RadioButtons" type="radio" value="101" data-bind=" checked: model().RadioButtons "></div>
                        <div>
                            102:
                            <input name="RadioButtons" type="radio" value="102" data-bind=" checked: model().RadioButtons "></div>
                        <div>
                            137:
                            <input name="RadioButtons" type="radio" value="137" data-bind=" checked: model().RadioButtons "></div>
                        <div>
                            142:
                            <input name="RadioButtons" type="radio" value="142" data-bind=" checked: model().RadioButtons "></div>
                        <div>
                            Current Radio Button Value - <span data-bind="text: model().RadioButtons "></span></div>
                    </td>
                </tr>
                <tr>
                    <td class="editor-label">
                        @Html.LabelFor(model => model.SelectTest)
                    </td>
                    <td class="editor-field">
                        <select id="SelectTestD" name="SelectTest">
                            <option value="Sample 1">Sample 1</option>
                            <option value="Sample 2">Sample 2</option>
                            <option value="Sample 3">Sample 3</option>
                            <option value="Sample 4">Sample 4</option>
                        </select>
                    </td>
                    <td class="editor-field">
                        <span data-bind="text: model().SelectTest "></span>
                    </td>
                </tr>
                <tr>
                    <td class="editor-label">
                        @Html.LabelFor(model => model.StringTest)
                    </td>
                    <td class="editor-field">
                        @Html.EditorFor(model => model.StringTest)
                        @Html.ValidationMessageFor(model => model.StringTest)
                    </td>
                    <td class="editor-field">
                        <span data-bind="text: model().StringTest "></span>
                    </td>
                </tr>
                <tr>
                    <td class="editor-label">
                        Span Text Binding
                    </td>
                    <td class="editor-field">
                        <span name="StringTest"></span>
                    </td>
                    <td class="editor-field">
                        <span>This should not be modified</span>
                    </td>
                </tr>
                <tr>
                    <td class="editor-label">
                        Label Text Binding
                    </td>
                    <td class="editor-field">
                        <label name="StringTest">
                        </label>
                    </td>
                    <td class="editor-field">
                        <label>
                            This should not be modified</label>
                    </td>
                </tr>
            </table>
        </fieldset>
    }
</div>
<script type="text/javascript">

    $(document).ready(function () {

        @*Call BuildJsPrototype version that outputs a JavaScript object factory based
        on Razor View model*@      
        @Html.BuildJsPrototype(typeof(BuildJavasciptDataModel_Test.DataModels.BasicModel), "basicModel");

        viewModel = {};
        viewModel.model = ko.observable(basicModel);

        $.ajax({
            url: 'BasicModel/GetModel',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                
                // now update the data model with new data from server.                                                    
                var t = ko.mapping.fromJS(data);
                viewModel.model(t);
             }
        });

        // use auto bind to add knockout data-bind to fields that needed it
        ko.autoBind.byName('#bindThis', 'model().');

        // because we already have model built, we can now
        // have knockout connect the data models with input fields
        ko.applyBindings(viewModel);
    });


</script>
